<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务管理</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="jobapp">
    <table class="table table-striped table-hover table-condensed">
        <thead>
        <th>任务</th>
        <th>任务介绍</th>
        <th>运行状态</th>
        <th>操作</th>
        </thead>
        <tbody>
            <tr v-for="job in jobs" >
                <td>{{job.id}}</td>
                <td>{{job.name}}</td>
                <td ><span :class="job.status=='RUN'? 'label label-success':'label label-danger'">{{job.status}}</span></td>
                <td>
                    <button type="button" class="btn btn-success" v-if="job.status=='STOP'" v-on:click="run(job.id)">启动</button>
                    <button type="button" class="btn btn-danger" v-if="job.status=='RUN'" v-on:click="stop(job.id)">停止</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    var app = new Vue({
        el: '#jobapp',
        data:{
            jobs:[]
        },
        created:function(){
            this.refresh();
        },
        methods:{
            refresh:function(){
                var that = this;
                $.get("/job/joblist", function(data){
                    that.jobs = data;
                });
            },
            run: function (id) {
                $.get("/job/start/"+id, function(data){
                    alert(data);
                    app.refresh();
                });
            },
            stop:function (id) {
                $.get("/job/stop/"+id, function(data){
                    alert(data);
                    app.refresh();
                });
            }
        }

    })
</script>
</html>